<!--图层列表-->
<div class="layerlist-con">
    <div class="list-header">
        <span>图层</span>
        <span (click)="newLayersData()" class="pointe"><i nz-icon nzType="plus-square" nzTheme="outline"></i></span>
    </div>
    <div class="layers-list">
        <ul nz-menu nzMode="inline" [nzTheme]="dark" *ngIf="LayersGeoJson">
            <li *ngFor="let layer of layerGeojson" class="pointe layerStyle" nz-submenu nzOpen nzTitle="{{layer.layerName}}" style="position: relative;">
                <span class="set-layers">
                    <a nz-popconfirm nzTitle="您确认要删除图层{{layer.layerName}}吗?" (nzOnConfirm)="confirm(layer.layerId)" (nzOnCancel)="cancel()">
                        <i class="pointe" nz-icon nzType="delete" nzTheme="outline"></i>
                    </a>
                    <i (click)="issueLayers(layer)" class="pointe" nz-icon nzType="to-top" style="margin: 0 10px;" nzTheme="outline"></i>
                    <a (click)="showLayers(layer)" class="pointe">
                        <i  nz-icon nzType="eye" nzTheme="outline" *ngIf="layer?.visibilit"></i>
                        <i  nz-icon nzType="eye-invisible" nzTheme="outline" *ngIf="!layer?.visibilit"></i>
                    </a>
                </span>
                <ul>
                    <li (click)="selectFeature(layer.layerId, features)" class="pointe" nz-menu-item *ngFor="let features of layer.layerJson.features">{{(features.properties?.featurename)? features.properties?.featurename: '要素名称'}}</li>
                </ul>
            </li>
        </ul>
    </div>
</div>


<!--发布图层-->
<nz-modal [(nzVisible)]="issueLayersShow" [nzTitle]="'发布图层'" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel()">
    <form class="user-form" [formGroup]="issueLayersForm" >
        <table class="info-box" cellspacing="0">
            <!--图层标签-->
            <tr style="margin-bottom: 20px">
                <td class="label-td">图层标签</td>
                <td class="input-td">
                    <nz-select formControlName="labelIds" style="width: 100%" [(ngModel)]="tagValue" [nzSize]="'default'" nzMode="tags" nzPlaceHolder="请选择标签">
                        <nz-option *ngFor="let option of listOfOption" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
                    </nz-select>
                </td>
            </tr>
            <!--标签名称-->
            <tr>
                <td class="label-td">标签名称</td>
                <td class="input-td">
                    <input nz-input formControlName="labelName" placeholder="请输入标签名称">
                </td>
            </tr>
            <!--修改图层名称-->
            <tr>
                <td class="label-td">修改图层名称</td>
                <td class="input-td">
                    <input nz-input formControlName="layersName" placeholder="请修改图层名称">
                </td>
            </tr>
        </table>
    </form>
    <ng-template #modalFooter>
        <button nz-button nzType="default" (click)="handleCancel()">取消</button>
        <button nz-button nzType="primary" (click)="submitLayers()" [nzLoading]="loading">确认</button>
    </ng-template>
</nz-modal>
